<template>
  <div style="padding: 10px;">
    <div style="margin-bottom: 10px;">
      <span>告警時間：</span>
      <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
        start-placeholder="告警開始日期" end-placeholder="告警結束日期" align="right">
      </el-date-picker>
      <span style="margin-left: 10px;">定位時間：</span>
      <el-date-picker v-model="value3" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
        start-placeholder="定位開始日期" end-placeholder="定位結束日期" align="right">
      </el-date-picker>
    </div>
    <div style="margin-bottom: 10px;">
      <el-autocomplete
        class="inline-input"
        v-model="ImeiValue"
        :fetch-suggestions="querySearch"
        placeholder="请输入设备IMEI"
        @select="handleSelect"
      ></el-autocomplete>
      <span>狀態：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
    </div>
    <el-divider></el-divider>
    <div style="margin-bottom: 10px;">
      <el-button plain @click="onChangeState">全部標記為已讀</el-button>
      <el-button plain @click="onChangeState">標記已讀</el-button>
      <el-button plain @click="onChangeDealState">全部處理</el-button>
      <el-button plain @click="onChangeDealState">處理</el-button>
      <el-button plain>選擇告警類型</el-button>
    </div>
    <el-table v-if="tableData.length" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :border="true"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序號" prop="id" width="55"></el-table-column>
      <el-table-column label="設備名稱" prop="facilityName"></el-table-column>
      <el-table-column label="IMEI" prop="facilityNum"></el-table-column>
      <el-table-column label="設備型號" prop="assetsType">
        <template slot-scope="scope">
          <span v-if="scope.row.assetsType === 0">JM-V340</span>
          <span v-else-if="scope.row.assetsType === 1">JM-V341</span>
          <span v-else-if="scope.row.assetsType === 2">JM-V342</span>
          <span v-else>Unknow-type</span>
        </template>
      </el-table-column>
      <el-table-column label="所屬帳號" prop="accountName"></el-table-column>
      <el-table-column label="告警類型" prop="warnType">
        <template slot-scope="scope">
          <span v-if="scope.row.warnType === 0">低電報警</span>
          <span v-else-if="scope.row.warnType === 1">拆卸報警</span>
          <span v-else-if="scope.row.warnType === 2">震動報警</span>
          <span v-else-if="scope.row.warnType === 3">聲控報警</span>
          <span v-else>未知報警</span>
        </template>
      </el-table-column>
      <el-table-column label="定位時間" prop="fixTime"></el-table-column>
      <el-table-column label="告警時間" prop="createTime"></el-table-column>
      <!-- <el-table-column label="定位狀態" prop="stateCourse"></el-table-column> -->
      <el-table-column label="告警地址" prop="adds"></el-table-column>
      <el-table-column label="處理狀態" prop="dealStatus">
        <template slot-scope="scope">
          <span class="un-read" v-if="scope.row.dealStatus === 0">未處理</span>
          <span class="is-read" v-else-if="scope.row.dealStatus === 1">已處理</span>
        </template>
      </el-table-column>
      <el-table-column label="已讀狀態" prop="status">
        <template slot-scope="scope">
          <span class="un-read" v-if="scope.row.status === 0">未讀</span>
          <span class="is-read" v-else-if="scope.row.status === 1">已讀</span>
        </template>
      </el-table-column>
    </el-table>
    <el-empty v-else description="暫無數據"></el-empty>
  </div>

</template>

<script>
  export default {
    name: 'reportDetail',

    data() {
      return {
        restaurants: [],
        ImeiValue: '',
        tableData: [],
        search: '',
        multipleSelection: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        value2: ['', ''],
        value3: ['', ''],
        options: [{
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '已讀'
        }, {
          value: '0',
          label: '未讀'
        }],
        value: '',
        loading: false
      }
    },

    mounted() {
      this.restaurants = this.loadAll()
      this.getData()
    },

    methods: {
      // handleEdit(index, row) {
      //   console.log(index, row);
      // },
      // handleDelete(index, row) {
      //   console.log(index, row);
      // },
      toggleSelection(rows) {
        // toggleSelection([tableData[1], tableData[2]])
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },

      handleSelectionChange(val) {
        this.multipleSelection = val
        // console.log(val)
      },

      onSearch() {
        this.getData()
      },

      //獲取告警列表
      getData() {
        this.loading = true
        let startTimeDate = this.value3[0] ? Number(this.value3[0]) : ''
        let endTimeDate = this.value3[1] ? Number(this.value3[1]) : ''
        let startTime = this.value2[0] ? Number(this.value2[0]) : ''
        let endTime = this.value2[1] ? Number(this.value2[1]) : ''

        this.$store.dispatch('report/fetchAlarmList',
        { status: this.value, facilityNum: this.ImeiValue,
        startTimeDate: startTimeDate, endTimeDate: endTimeDate,
        startTime: startTime, endTime: endTime })
        .then(res => {
          this.loading = false
          this.tableData = res.result
        }).catch(err => {
          this.loading = false
          this.$message.error(err)
          return false
        })
      },

      //修改狀態
      onChangeState() {
        this.multipleSelection.forEach(row => {
          this.loading = true
          this.$store.dispatch('report/fetchAlarmStatusUpdate', { id: row.id, status: 1 }).then(res => {
            this.loading = false
            this.getData()
            // this.tableData = res.result
          }).catch(err => {
            this.loading = false
            this.$message.error(err)
            return false
          })
        })
      },

      //查询imei列表
      querySearch(queryString, cb) {
        var restaurants = this.restaurants
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },

      //创建搜索选项
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },

      //搜索选择框选中事件
      handleSelect(item) {
        console.log(item)
      },

      //加载查询得到的imei列表
      loadAll() {
        return [
          // { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
        ]
      },
    },
  }
</script>

<style scoped lang="scss">
@import "@/assets/css/them.scss";

.is-read {
  color: $connectColor;
}

.un-read {
  color: $disconnectColor;
}
</style>
